<template>
  <div>
    <el-row :gutter="20">
      <Card>
        <el-table
          highlight-current-row
          :data="tableData2"
          style="width: 100%">
          <el-table-column
            prop="ynName"
            label="待办">
          </el-table-column>
          <el-table-column fixed="right" width="100"
                           label="操作">
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="edit2(scope.$index, tableData2)"
                type="text">
                查看
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </Card>
      <Card>
        <el-table
          highlight-current-row
          :data="tableData"
          @current-change="handleCurrentChange"
          style="width: 100%">
          <el-table-column
            prop="ynName"
            label="看过的电影">
          </el-table-column>
        </el-table>
      </Card>
      <Card>
        <el-table
          highlight-current-row
          :data="tableData3"
          @current-change="handleCurrentChange"
          style="width: 100%">
          <el-table-column
            prop="ynName"
            label="相册">
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="edit3(scope.$index, tableData3)"
                type="text">
                {{ scope.row.ynName }}
              </el-button>
            </template>
          </el-table-column>

          <el-table-column fixed="right" width="100"
                           label="操作">
            <template slot-scope="scope">

              <el-upload
                class="upload-demo"
                action="/jspace/ynWePhoto/upload"
                multiple
                :limit=10
                accept=".png, .jpg, .jpeg"
                :on-success="onSucc"
                :on-error="onError"
                :data="{ynTipId:tableData3[scope.$index].id}"
                :show-file-list="false">
                <el-button type="text">上传</el-button>
              </el-upload>

            </template>
          </el-table-column>
        </el-table>
      </Card>
    </el-row>

    <el-dialog :fullscreen="true" title="" :close-on-click-modal="false" width="80%" :visible.sync="type2FormVisible">
      <div style="border: 1px solid #ccc;">
        <Toolbar
          style="border-bottom: 1px solid #ccc"
          :editor="editor"
          :mode="mode"
        />
        <Editor
          style=" overflow-y: hidden;"
          v-model="html"
          :defaultConfig="editorConfig"
          @onCreated="onCreated"
        />
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="type2FormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveOrUpdate">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog :fullscreen="true" title="" :close-on-click-modal="false" width="80%" :visible.sync="type3FormVisible">
      <div>
        <el-row :gutter="20">

          <el-col v-for="p in photoList" :key="p.id" :span="4">
            <div class="grid-content bg-purple" style="display: flex;justify-content: center">
              <el-image
                style="height: 150px"
                :src="p.ynUrlPreview"
                fit="contain" :preview-src-list="[p.ynUrl]"></el-image>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>

</template>

<script>
import '@wangeditor/editor/dist/css/style.css';
import Card from "../index/Card";
import {Editor, Toolbar} from '@wangeditor/editor-for-vue';
import {Message} from "element-ui";

export default {
  name: "we",
  components: {Card, Editor, Toolbar},

  created() {
    this.getYnWeTips1()
    this.getYnWeTips2()
    this.getYnWeTips3()
  },
  methods: {
    onCreated(editor) {
      const toolbarConfig = editor.getConfig()

      toolbarConfig.excludeKeys = [
        'uploadImage',
        'uploadVideo'
      ]

      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    },
    getYnWeTips1: function () {
      this.axios.post('/ynWeTips/list', {ynType: '1'}).then(res => {
        if (!!res.data.data) {
          this.tableData = res.data.data;
        }
      })
    },
    getYnWeTips2: function () {
      this.axios.post('/ynWeTips/list', {ynType: '2'}).then(res => {
        if (!!res.data.data) {
          this.tableData2 = res.data.data;
        }
      })
    },
    getYnWeTips3: function () {
      this.axios.post('/ynWeTips/list', {ynType: '3'}).then(res => {
        if (!!res.data.data) {
          this.tableData3 = res.data.data;
        }
      })
    },
    onSucc(response, file, fileList) {
      Message.success('上传成功');
    },
    onError(err, file, fileList) {
      Message.error('上传失败');
    },
    changeDate(val) {
      // this.form.ynDay = moment(val).format('yyyy-MM-dd');
    },
    saveOrUpdate() {
      this.axios.post('/ynWeTips/saveOrUpdate', {content: this.html, id: this.id}).then(res => {
        if (200 === res.data.code) {
          Message.success('成功');
        }
      })
    },
    update() {
      this.addDialogFormVisible = true;
    },
    handleCurrentChange(val) {
      this.currentRow = val;
    },
    edit2(index, rows) {
      this.axios.post('/ynWeTips/detail', {id: rows[index].id}).then(res => {
        if (!!res.data.data) {
          this.html = res.data.data.content;
          this.id = res.data.data.id;
          this.type2FormVisible = true
        }

      })
    },
    edit3(index, rows) {
      this.axios.post('/ynWePhoto/list', {ynTipId: rows[index].id}).then(res => {
        if (!!res.data.data) {
          this.photoList = res.data.data;
          this.type3FormVisible = true
        }

      })
    },
    uploadPhoto(index, rows) {
      this.axios.post('/ynWePhoto/list', {ynTipId: rows[index].id}).then(res => {
        if (!!res.data.data) {
          this.photoList = res.data.data;
          this.type3FormVisible = true
        }

      })
    },
  },
  data() {
    return {
      tableData: [],
      tableData2: [],
      tableData3: [],
      photoList: [],
      currentRow: null,
      form: {
        ynName: '',
        ynDepartment: '',
        ynAssignName: '',
        ynMonth: '',
        ynTarget: '',
      },
      type2FormVisible: false,
      type3FormVisible: false,
      radioValue: '', // 选中的单选按钮的值
      radioOptions: [], // 存储从接口获取的数据
      editor: null,
      html: '',
      id: '',
      toolbarConfig: {},
      editorConfig: {placeholder: '请输入内容...'},
      mode: 'simple', // or 'simple'
    }

  },
  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy()
  }
}
</script>

<style scoped>
.bg-purple {
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
  margin-top: 20px;
}
</style>
